<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;">
      <h3 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif">SKU管理</h3>
    </el-header>
    <el-main style="background-color: #fff;">
      <el-container>
        <el-header height="124px">
          <!--搜索下拉框-->
          <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <!--查询-->
            <el-form-item label="名称">
              <el-input v-model="selectFrom.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品条目">
              <template>
                <el-select v-model="selectFrom.code" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="SUP in AddSKUlist"
                    :key="SUP.SPU_code"
                    :label="SUP.SPU_name"
                    :value="SUP.SPU_code">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="款型">
              <template>
                <el-select v-model="selectFrom.style" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="iltm in AddSKUcolor"
                    :label="iltm.spec_option_value"
                    :value="iltm.spec_option_id">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="颜色">
              <template>
                <el-select v-model="selectFrom.color" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="iltm in AddSKUstyle"
                    :label="iltm.spec_option_value"
                    :value="iltm.spec_option_id">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="状态">
              <template>
                <el-select v-model="selectFrom.state" filterable clearable placeholder="请选择">
                  <el-option
                    label="停用"
                    value="停用">
                  </el-option>
                  <el-option
                    label="启用"
                    value="启用">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="selectSKU" >查询</el-button>
            </el-form-item>
            <!--查询-->

            <!--增加SKU-->
            <el-button type="primary" icon="el-icon-plus" size="mini"  @click="AddSku" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">添加SKU商品</el-button>
            <el-dialog title="新增商品详情条目" :visible.sync="dialogSKUFormVisible" >
              <el-form :model="formAddSKU" size="mini">
                <el-form-item label="选择SPU条目" :label-width="formLabelWidth">
                  <el-select v-model="formAddSKU.SPU_code" placeholder="请选择SPU条目" filterable>
                    <el-option v-for="SUP in AddSKUlist" :label="SUP.SPU_name" :value="SUP.SPU_code"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品详情名称" :label-width="formLabelWidth" >
                  <el-input v-model="formAddSKU.SKU_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品款式" :label-width="formLabelWidth">
                  <el-select  v-model="formAddSKU.SKU_style" placeholder="商品款式" filterable>
                    <el-option v-for="iltm in AddSKUstyle" :label="iltm.spec_option_value" :value="iltm.spec_option_id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品颜色" :label-width="formLabelWidth">
                  <el-select v-model="formAddSKU.SKU_color" placeholder="商品颜色" filterable>
                    <el-option v-for="iltm in AddSKUcolor" :label="iltm.spec_option_value" :value="iltm.spec_option_id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品进价" :label-width="formLabelWidth">
                  <el-input-number v-model="formAddSKU.purchase_price" autocomplete="off" :precision="2" :step="0.1" :max="99999"></el-input-number>
                </el-form-item>
                <el-form-item label="商品卖价" :label-width="formLabelWidth">
                  <el-input-number v-model="formAddSKU.sell_price" autocomplete="off" :precision="2" :step="0.1" :max="99999"></el-input-number>
                </el-form-item>
                <el-form-item label="商品库存" :label-width="formLabelWidth">
                  <el-input-number v-model="formAddSKU.stock" @change="handleChange" :min="1" :max="99999" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="入库时间" :label-width="formLabelWidth">
                  <template >
                    <div class="block">
                      <el-date-picker
                        v-model="formAddSKU.produce_date"
                        type="datetime"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </div>
                  </template>
                </el-form-item>
                <el-form-item label="商品详情图片" :label-width="formLabelWidth">
                  <el-upload class="upload-demo" action="" :before-upload="beforeAvatarUpload1" :auto-upload=false :on-change="onchange1" :on-remove="handleRemove1" :file-list="fileList1" list-type="picture" style="width:300px">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="商品详情尺寸图片" :label-width="formLabelWidth">
                  <el-upload class="upload-demo" action="" :before-upload="beforeAvatarUpload2" :auto-upload=false :on-change="onchange2" :on-remove="handleRemove2" :file-list="fileList2" list-type="picture" style="width:300px">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>

                </el-form-item>
                <el-form-item label="商品状态" :label-width="formLabelWidth">
                  <el-switch
                    v-model="formAddSKU.SKU_type_state"
                    active-value="启用"
                    inactive-value="停用"
                    active-text="启用"
                    inactive-text="停用"
                  >
                  </el-switch>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSKUFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitAdd">确 定</el-button>
              </div>
            </el-dialog>
            <!--增加SKU-->

          </el-form>
          <!--/搜索下拉框-->



        </el-header>
        <el-main>
          <el-table
            ref="multipleTable"
            :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"

            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              align="center"
              label="商品详情编号">
              <template slot-scope="scope">
                <span>{{ scope.row.SKU_code }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品编号">
              <template slot-scope="scope">
                <span>{{scope.row.SPU_code}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品详情名称">
              <template slot-scope="scope">
                <span>{{scope.row.SKU_name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品款型">
              <template slot-scope="scope">
                <span>{{scope.row.spec_option_value_style}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品颜色">
              <template slot-scope="scope">
                <span>{{scope.row.spec_option_value_color}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品进价">
              <template slot-scope="scope">
                <span>{{scope.row.purchase_price}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品卖价">
              <template slot-scope="scope">
                <span>{{scope.row.sell_price}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="库存">
              <template slot-scope="scope">
                <span>{{scope.row.stock}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品图片">
              <template slot-scope="scope">
                <img :src="'http://localhost:8989'+scope.row.SKU_pic_path" :alt="scope.row.SKU_name">
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="状态">
              <template slot-scope="scope">
                <el-tag :type="toggleButtonChange(scope.row.SKU_type_state).StateColor">
                  {{scope.row.SKU_type_state}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="200px"
            align="center"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleCheck(scope.$index, scope.row)">查看</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-if="$store.state.userInfo.employeeLv!=='门店管理员'">编辑</el-button>
                <el-button
                  size="mini"
                  :type="toggleButtonChange(scope.row.SKU_type_state).color"
                  @click="singleSubTypeToggle(scope.$index, scope.row)"
                  v-if="$store.state.userInfo.employeeLv!=='门店管理员'">{{toggleButtonChange(scope.row.SKU_type_state).string}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <div class="myLeft">
            <el-button type="danger" @click="handleDisable" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">全部停用</el-button>
            <el-button type="success" @click="handleEnable" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">全部启用</el-button>
            <!--<el-button type="info" disabled>导出 Excel</el-button>-->
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.length"
            class="myRight">
          </el-pagination>
        </el-footer>
      </el-container>
      <el-dialog title="商品详情表" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="name" label="类目名" width="150" align="center"></el-table-column>
          <el-table-column property="date" label="数据" width="750" align="center"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="编辑商品详情" :visible.sync="dialogFormVisible">
        <el-form :model="form" size="mini">
          <el-form-item label="商品详情编码" :label-width="formLabelWidth" >
            <el-input v-model="form.code" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="商品详情名" :label-width="formLabelWidth" >
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品款式" :label-width="formLabelWidth">
            <el-select  v-model="form.styleGoods" placeholder="商品款式">
              <el-option v-for="iltm in GoodsStyle" :label="iltm.spec_option_value" :value="iltm.spec_option_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品颜色" :label-width="formLabelWidth">
            <el-select v-model="form.ColorGoods" placeholder="商品颜色">
              <el-option v-for="iltm in GoodsColor" :label="iltm.spec_option_value" :value="iltm.spec_option_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品进价" :label-width="formLabelWidth">
            <el-input-number v-model="form.purchase_price" autocomplete="off" :precision="2" :step="0.1" :max="99999"></el-input-number>
          </el-form-item>
          <el-form-item label="商品卖价" :label-width="formLabelWidth">
            <el-input-number v-model="form.sell_price" autocomplete="off" :precision="2" :step="0.1" :max="99999"></el-input-number>
          </el-form-item>
          <el-form-item label="商品库存" :label-width="formLabelWidth">
              <el-input-number v-model="form.stock" @change="handleChange" :min="1" :max="99999" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="商品图片" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action="" :before-upload="beforeAvatarUpload1" :auto-upload=false :on-change="onchange1" :on-remove="handleRemove1" :file-list="fileList1" list-type="picture" style="width:300px">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品尺寸图片" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action="" :before-upload="beforeAvatarUpload2" :auto-upload=false :on-change="onchange2" :on-remove="handleRemove2" :file-list="fileList2" list-type="picture" style="width:300px">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>




        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmitSet1">确 定</el-button>

        </div>
      </el-dialog>

    </el-main>

  </el-container>
</template>

<script>
  export default {
    name: 'subType',
    components: {
      // subTypeCheckDialog
    },
    // 表格数据的操作方法
    data () {
      return {
        /*上传的数据*/
        fileList1: [],
        fileList2: [],
        /*/上传的数据*/
        /*搜索的from表单*/
        selectFrom:{
          name:'',
          code:'',
          style:'',
          color:'',
          state:'',
        },
        /*/搜索的from表单*/
        /*增加的模态框状态*/
        dialogSKUFormVisible : false,
        /*/增加的模态框状态*/
        /*增加模态框的from表单*/
        AddSKUlist:[],
        AddSKUstyle:[],
        AddSKUcolor:[],
        formAddSKU:{
          SPU_code:'',
          SKU_name:'',
          purchase_price:'',
          sell_price:'',
          stock:'',
          produce_date:'',
          SKU_pic_path:'',
          SKU_size_pic_path:'',
          SKU_type_state:'',
          SKU_color:'',
          SKU_style:'',
        },
        /*增加时间数据*/
        formLabelWidth: '180px',//调整距离
        /*/增加模态框的from表单*/

        /*查看的模态框状态*/
        dialogTableVisible: false,
        /*/查看的模态框状态*/
        /*修改的模态框状态*/
        dialogFormVisible:false,
        /*修改的模态框状态*/
        currentPage: 1,
        currentSpuPage: 1,
        pageSize: 10,
        list: [],
        click_list:{},
        chosenList: [],
        /*修改的模态框属性*/
        form: {
          code:'',
          name: '',
          sell_price:'',
          purchase_price:'',
          stock:'',
          SKU_pic_path:'',
          SKU_size_pic_path:'',
          styleGoods:'',
          spec_col_id_style:'',
          ColorGoods:'',
          spec_col_id_color:'',
          // delivery: false,
          // type: [],
        },
        GoodsColor:[],
        GoodsStyle:[],
        /*/修改的模态框属性*/

        //表头下拉框
        formInline: {
          user: '',
          region: ''
        },
        /*模态框表格数据*/
        gridData: [
        ],
        /*/模态框表格数据*/
      }
    },

    methods: {

      /*搜索SKU*/
      selectSKU(){
        console.log(this.selectFrom);
        this.$axiosx.post(`/api/backSelectSKU`,{
            from:this.selectFrom
        })
          .then((response)=>{
            this.list=response.data;
            for(let i=0;i<this.list.length;i++){
              this.list[i].SKU_pic_path=this.list[i].SKU_pic_path.substr(1);
            }

          })
          .catch((err)=>{
            console.log(err);
          })
      },
      /*/搜索SKU*/

      /*增加SKU的方法*/
      AddSku(){
        this.dialogSKUFormVisible = true;
      },
      AddSkuRight(){
        this.dialogSKUFormVisible = false;
        console.log(this.formAddSKU);
        this.$axiosx.post('/api/backAddSKURingt',{
          form: this.formAddSKU
        })
          .then((response)=>{
            console.log(response.data);
            this.refreshData();
          })
          .catch((error)=>{
            console.log(error.message);
          })
      },
      /*/增加SKU的方法*/

      handleChange(value) {
        console.log(value);
      },

      /*模态框方法*/
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      /*模态框方法*/

      //添加图片
      onchange1 (file, filesList) {
        console.log(file);
        //创建临时的路径来展示图片
        let windowURL = window.URL || window.webkitURL;
        this.src = windowURL.createObjectURL(file.raw);
        this.param1 = new FormData();//重新写一个表单上传的方法
        this.param1.append('file', file.raw, file.name);
      },
      handleRemove1 (file, filesList) {
        this.param1.delete('file')
      },
      onchange2 (file, filesList) {
        console.log(file);
        //创建临时的路径来展示图片
        let windowURL = window.URL || window.webkitURL;
        this.src = windowURL.createObjectURL(file.raw);
        this.param2 = new FormData();//重新写一个表单上传的方法
        this.param2.append('file', file.raw, file.name);
      },
      handleRemove2 (file, filesList) {
        this.param2.delete('file')
      },
      onSubmitAdd () {//增加商品的表单提交的事件
        let mainimg = this.form.mainimg;//数据
        console.log("进入了表单");
        this.param1.append('message', mainimg);//req.body.message
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        this.$axiosx.post("/api/upSKUloadimg.do", this.param1, config)
          .then(resp=> {
          console.log(resp.data);
            this.formAddSKU.SKU_pic_path=`./images/view_pic/sku/${resp.data.filename}`;
            this.onSubmitAdd2();
        }).catch(err => {
          console.log(err.message);
        })
      },
      onSubmitAdd2 () {//添加的尺寸表单提交的事件
        let mainimg = this.form.mainimg;//数据
        console.log("进入了表单");
        this.param2.append('message', mainimg);//req.body.message
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        this.$axiosx.post("/api/upSKUloadimg_size.do", this.param2, config)
          .then(resp=> {
            console.log(resp.data);
            this.formAddSKU.SKU_size_pic_path=`./images/view_pic/sku_size/${resp.data.filename}`;
            if(this.formAddSKU.SKU_pic_path)
              this.AddSkuRight();//添加表单事件
          }).catch(err => {
          console.log(err.message);
        })
      },
      beforeAvatarUpload1 () {
        return false;
      },
      beforeAvatarUpload2 () {
        return false;
      },
       //添加图片
      // 分页控制开始
      handleSizeChange (val) {
        this.pageSize = val
      },
      handleCurrentChange (val) {
        this.currentPage = val
      },
      handleSpuCurrentChange(val) {
        this.currentSpuPage = val
      },
      // 分页控制结束


        //  多选行
      handleSelectionChange (val) {
        this.chosenList = [];
        val.forEach((val, index, arr) => {
          this.chosenList.push(val.SKU_code)
        })
      },
      //  编辑
      handleEdit (index, row) {
        this.click_list=row;
        this.dialogFormVisible = true;
        this.form.styleGoods=this.click_list.spec_option_value_style;
        this.form.ColorGoods=this.click_list.spec_option_value_color;
        this.form.code = this.click_list.SKU_code;
        this.form.name = this.click_list.SKU_name;
        this.form.spec_col_id_color=this.click_list.spec_col_id_color;
        this.form.spec_col_id_style=this.click_list.spec_col_id_style;
        this.form.sell_price=this.click_list.sell_price;
        this.form.purchase_price=this.click_list.purchase_price;
        this.form.stock=this.click_list.stock;
        console.log(this.form);
        this.$axiosx.get('/api/backSKUEdit',{
          params:{
            SPU_Code:this.click_list.SPU_code
          }
        })
          .then((response)=>{
            console.log(response.data);
            this.GoodsColor=response.data.color;
            this.GoodsStyle=response.data.style;
          })
          .catch((error)=>{

          });
      },
      /*编辑确认*/
      onSubmitSet1 () {//增加商品的表单提交的事件
        let mainimg = this.form.mainimg;//数据
        console.log("进入了表单");
        this.param1.append('message', mainimg);//req.body.message
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        this.$axiosx.post("/api/upSKUloadimg.do", this.param1, config)
          .then(resp=> {
            console.log(resp.data);
            this.form.SKU_pic_path=`./images/view_pic/sku/${resp.data.filename}`;
            if(this.form.SKU_pic_path)
              this.onSubmitSet2();
          }).catch(err => {
          console.log(err.message);
        })
      },
      onSubmitSet2 () {//添加的尺寸表单提交的事件
        let mainimg = this.form.mainimg;//数据
        console.log("进入了表单");
        this.param2.append('message', mainimg);//req.body.message
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        this.$axiosx.post("/api/upSKUloadimg_size.do", this.param2, config)
          .then(resp=> {
            console.log(resp.data);
            this.form.SKU_size_pic_path=`./images/view_pic/sku_size/${resp.data.filename}`;
            if(this.form.SKU_pic_path)
              this.GoodsModifierOn();//修改表单事件
          }).catch(err => {
          console.log(err.message);
        })
      },

      GoodsModifierOn(){
        this.dialogFormVisible = false;
        let arr=[];
        for (let name in this.form) {
          arr.push(this.form[name]);
        }
        console.log(arr);
        let code=arr.splice(0,1);
        let attr=arr.splice(6,10);
        console.log(this.form);
        console.log(code);
        console.log(attr);
        this.$axiosx.post('/api/backSKUEditRight',{
          code:code,
          SKU:arr,
          SKUattr:attr})
          .then((response)=>{
            console.log(response.data);
            this.param1=``;
            this.param2=``;
            this.refreshData();
          })
          .catch((error)=>{
            console.log(error.message);
          })

      },
      //  删除单个s
      singleSubTypeToggle (index, row) {
        console.log(row);
        if (row.SKU_type_state === '启用') {
          this.subTypeStateToggle([row.SKU_code], '停用')
        } else {
          this.subTypeStateToggle([row.SKU_code], '启用')
        }
      },
      //查看
      handleCheck (index, row) {
      this.dialogTableVisible = true;
      console.log(row);
      this.gridData=[
        {name:"商品详情编号", date:row.SKU_code},
        {name:"商品名称", date:row.SPU_name},
        {name:"商品图片路径", date:row.SKU_pic_path},
        {name:"商品图片尺寸路径", date:row.SKU_size_pic_path},
        {name:"商品描述", date:row.SPU_describe},
        {name:"商品名称", date:row.SPU_name},
        {name:"商品编号", date:row.SPU_code},
        {name:"入库时间", date:row.log_date},
        {name:"商品一级类别", date:row.main_type_name},
        {name:"商品二级类别", date:row.sub_type_name},
        {name:"商品颜色", date:row.spec_option_value_color},
        {name:"商品款型", date:row.spec_option_value_style},
        {name:"商品库存", date:row.stock},
        {name:"商品进价", date:row.purchase_price},
        {name:"商品卖价", date:row.sell_price},
      ];

      //   console.log(index);
      //   console.log(this.gridData)
      },
      handleDisable () {
        this.subTypeStateToggle(this.chosenList, '停用')
      },
      handleEnable () {
        this.subTypeStateToggle(this.chosenList, '启用')
      },
      subTypeStateToggle (arr, method) {
        console.log(arr);
        console.log(method);
        this.$axiosx.post('/api/backSKUTypeToggle', {
          arr: arr,
          method: method
        })
          .then((response) => {
            console.log(response.data);
            if (response.data === '数据修改成功') {
              this.$message({
                type: response.data,
                message: '操作成功'
              });
              this.refreshData()
            }
          })
          .catch((error) => {
            console.log(error.message)
          })
      },
      toggleButtonChange (param) {
        if (param === '启用') {
          return {
            string: '停用',
            color: 'danger',
            StateColor: 'success'
          }
        } else {
          return {
            string: '启用',
            color: 'success',
            StateColor: 'danger'
          }
        }
      },
      refreshData () {
        this.$axiosx.get('/api/backSKUManage')
          .then((response) => {
            this.list = response.data.list;
            this.AddSKUlist = response.data.SUPelect;
            this.AddSKUstyle = response.data.style;
            this.AddSKUcolor = response.data.color;
            console.log(this.AddSKUstyle);
            console.log(this.AddSKUcolor);
            for(let i=0;i<this.list.length;i++){
              this.list[i].SKU_pic_path=this.list[i].SKU_pic_path.substr(1);
            }
            console.log(this.list[0].SKU_pic_path.substr(1));
          })
          .catch((error) => {
            console.log(error.message)
          })
      }
    },
    created () {
      this.refreshData()
    }
  }
</script>

<style scoped lang="less">
  img{
    width: 100px;
  }
</style>
